﻿
@{
    Layout = null;
    var imgUrl = ViewBag.img_url;
    var UserId = ViewBag.user_id;
    decimal userRed = ViewBag.red;
}
@model activity_dto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>世界杯任务</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <link href="~/Content/css/base.css" rel="stylesheet" />
    <link href="~/Content/css/tuoken.css" rel="stylesheet" />
    <link href="~/Content/css/worldcup.css" rel="stylesheet" />
    <link href="~/Content/css/dropload.css" rel="stylesheet" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="~/Content/js/base.js"></script>
    <style>
        .rules_title {
            padding-left: 1.1rem;
        }
        /*.guess_banner .guize {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
        }

        #my_guess {
            margin-right: 0.5rem;
        }*/

        .begin {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            background-color: #fff;
            width: 94%;
            margin: 0.3rem auto 0.1rem auto;
            padding: 0.15rem 0 0.15rem 0;
            border-radius: 0.1rem;
        }

            .begin span {
                width: 49%;
                line-height: 0.5rem;
                font-size: 0.28rem;
                color: #8C9297;
                text-align: center;
            }

                .begin span:first-child {
                    border-right: 1px solid #ededed;
                }

                .begin span.on {
                    color: #FF4E4E;
                }
    </style>
</head>
<body>
    @*<div class="header">
            <a href="javascript:history.go(-1);">
                <span class="back"></span>
            </a>
            <div class="hdtitle">
                激情世界杯
            </div>
        </div>*@
    <div class="guess_banner">
        <img src="@(imgUrl + Model.img_url)" alt="" />
        <div class="guize">
            <span id="my_guess">我的竞猜</span> <span id="activity_rules">活动规则</span>
        </div>
    </div>
    <div class="begin">
        <span class="on start">未开始</span>
        <span class="end">已结束</span>
    </div>
    <div class="guess_row" id="playing">

    </div>
    <div class="guess_row" id="playing_end" >

    </div>
    <div class="mask"></div>
    <!-- 活动规则弹窗 -->
    <div class="activity_modal" id="activity_modal2">
        <div class="content">
            <p class="title rules_title">活动规则 <span class="close"></span></p>
            <div class="activity_rules">
                @Html.Raw(Model.detail)
            </div>
        </div>
    </div>



    <!-- 队伍介绍弹窗 -->
    <div class="activity_modal" id="team_modal">
        <div class="content">
            <p class="title rules_title">队伍介绍 <span class="close"></span></p>
            <div class="activity_rules">
                @*<div class="team">
                        <h2>俄罗斯国家代表队</h2><img src="/content/images/worldcup/russia.png" alt="" class="img" />
                        <p>俄罗斯国家队是欧洲知名的劲旅。
                        <p>从1958年开始，俄罗斯</p>
                        <p>（苏联）10次打入世界杯，3次打入世界杯8强，1次世界杯第4名。</p>
                        <p>1960年首届法国欧洲杯开始，15次打入欧洲杯，是第一支夺得欧洲杯冠军的国家队，此外还获得欧洲杯亚军3次。</p>
                        <p>1956年和1988年两次夺得奥运会金牌。</p>
                        <p>俄罗斯国家男子足球队作为东道主是2018年世界杯参赛队，第11次参加世界杯。</p>

                    </div>*@

            </div>
        </div>
    </div>


    <!-- 参与竞猜弹窗 -->
    <div class="activity_modal" id="activity_modal" data-id="0">
        <div class="content">
            <p class="title rules_title">参与竞猜 <span class="close"></span></p>
            <div class="activity_rules">

                <div class="participation">
                    <p style="color:#c8c9cb">每一次为0.1红钻 </p>
                    <div class="plus">
                        <input type="button" value="-" class="min" />
                        <input type="text" class="num" value="1" readonly />

                        <input type="button" value="+" class="add" id="add" />
                    </div>
                    @{ string red = (Math.Truncate(userRed * 10) / 10.0m).ToString("0.0");}
                    <p>投注<i style="color:red;font-style: normal;" id="playred">0.1</i>红钻 <span style="color:#999999">您总共可投<i style="color:red;font-style: normal;" id="userred" data-red="@userRed" data-userred="@red">@red</i>红钻</span></p>
                    <input type="button" value="取消" class="closebtn" /><input type="button" value="确定" class="okbtn " />

                </div>

            </div>
        </div>
    </div>
    <script src="~/Scripts/dropload.js"></script>
    <script src="~/Content/js/layer/1.9.3/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            var res = document.cookie.indexOf("name");
            alert(res);
            if (res != 0) {
                var oDate = new Date();
                document.cookie = "name=wordcup";
                $(".mask").css("display", "block");
                $("#activity_modal2").addClass('activity_modal_animation')
            }
            var itemIndex = 0;
            var tab1LoadEnd = false;
            var tab2LoadEnd = false;
            $("#playing").show();
            $("#playing_end").hide();
            var query = { page: 1, size: 10, type: 0 };
            var query1 = { page: 1, size: 10, type: 1 };
            var data;
            var dropload = $(".guess_row").dropload({
                scrollArea: window,
                loadDownFn: function (me) {
                    if (itemIndex == '0') data = query; else data = query1;
                    $.ajax({
                        url: '/ad/_WorldCup', type: "post", data: data,
                        success: function (response) {
                            var paged = $(response).siblings("#page_" + data.type);
                            if (paged.length == 1) {
                                query.result += Number.parseInt(paged.attr("rows"));
                                $(".guess_row").eq(data.type).append($(response));
                                $(".guess_row").eq(data.type).find("#page_" + data.type).remove();
                                if (itemIndex == '0') query.page++;
                                else query1.page++;
                            } else {
                                if (data.type == 0) { tab1LoadEnd = true; }
                                else if (data.type == 1) { tab2LoadEnd = true; }
                                me.lock();
                                me.noData();
                            }
                            me.resetload();
                        },
                        error: function (xhr, type) {
                            me.lock();
                            me.noData();
                            me.resetload();
                        }
                    });
                }
            });
            
            $('.begin span').click(function () {
                var that = $(this);
                itemIndex = that.index();
                that.addClass('on').siblings().removeClass('on');
                $('.guess_row').eq(itemIndex).show().siblings('.guess_row').hide();
                if (itemIndex=='0') {
                    if (!tab1LoadEnd) {
                        // 解锁
                        dropload.unlock();
                        dropload.noData(false);
                    } else {
                        // 锁定
                        dropload.lock('down');
                        dropload.noData();
                    }
                }
                if (itemIndex=='1') {
                    if (!tab2LoadEnd) {
                        // 解锁
                        dropload.unlock();
                        dropload.noData(false);
                    } else {
                        // 锁定
                        dropload.lock('down');
                        dropload.noData();
                    }
                }
                dropload.resetload();
            })
            $("#my_guess").click(function () {
                if (@UserId== 0) {
                    login();
                } else {
                    location.href = "/ad/WorldCupRecord"
                }
            });
            $("#playing ").delegate(".guess_task .flag", "click", function () {
                $.ajax({
                    url: "/ad/_Team",
                    data: { id: $(this).parent("div").attr("data-id") },
                    type: "post",
                    dataType: "html",
                    success: function (data) {
                        $("#team_modal .activity_rules").html(data);
                        $(".mask").css("display", "block");
                        $("#team_modal").addClass('activity_modal_animation')
                    }, error: function (xhr, type) { layer.msg("网络异常")}
                });
            });
            $("#playing").delegate(".guess_task .digit", "click", function () {
                if ($(this).hasClass("hui")) { return; }
                if ($(this).hasClass("playend")) { layer.msg("比赛已停止投注"); return; }
                $("#activity_modal .num").val(1);
                $("#playred").text(0.1)
                $("#activity_modal").attr("data-id", $(this).attr("id"))
                $(".mask").css("display", "block");
                $("#activity_modal").addClass('activity_modal_animation')
            });
            $("#activity_rules").click(function (event) {
                $(".mask").css("display", "block");
                $("#activity_modal2").addClass('activity_modal_animation')
            });
            $(" #activity_modal2 .close").click(function (event) {
                $(".mask").css("display", "none");
                $("#activity_modal2").removeClass('activity_modal_animation')
            });
            $(" #team_modal .close").click(function (event) {
                $(".mask").css("display", "none");
                $("#team_modal").removeClass('activity_modal_animation')
            });
            $(" #activity_modal .close").click(function (event) {
                $(".mask").css("display", "none");
                $("#activity_modal").removeClass('activity_modal_animation')
            });




            //红钻数量加减
            var num = $(".num");
            var red = $("#playred");
            var user_red = $("#userred");
            $(".add").click(function () {
                if (parseInt(num.val()) * 0.1 >= parseFloat(user_red.attr("data-userred"))) { return false; }
                num.val(parseInt(num.val()) + 1);
                red.text(((parseInt(num.val())) * 0.1).toFixed(1));
            })
            $(".min").click(function () {
                if (num.val() <=1) {

                    return false;
                }
                num.val(parseInt(num.val()) - 1);
                red.text(((parseInt(num.val())) * 0.1).toFixed(1));

            })
            var flag = false;
            $(".okbtn").click(function () {
                if (@UserId== 0) {
                    login();
                }
                else {
                    if (flag) return;
                    flag = true;
                    var num = $(".num").val();
                    var userred = user_red.attr("data-userred");
                    if (parseFloat(userred) < 0.1) { layer.msg("红钻不足"); return false; }
                    var id = $("#activity_modal").attr("data-id");
                    var that = $("#" + id);
                    var team_id = that.parents(".play").attr("data-id");
                    var play_id = that.parents(".play").attr("data-playid");
                    var datanum = that.attr("data-num");
                    var datatnum = that.attr("data-tnum");

                    $.post("/ad/save", { play_id: play_id, num: num, team_id: team_id }, function (result) {
                        if (result.result_code == 1000) {
                            layer.msg("竞猜成功");
                            var dnum = parseInt(num) + parseInt(datanum);
                            var tdnum = parseInt(num) + parseInt(datatnum);

                            var newred = parseFloat(userred) - parseFloat(parseInt(num) * 0.1);
                            user_red.attr("data-userred", newred.toFixed(1));
                            user_red.text(newred.toFixed(1));
                            that.removeClass("tie").addClass("win");
                            if (that.parent("div ").hasClass("draw_ct")) {
                                that.text("平局(" + dnum + ")");
                            }
                            else { that.text("胜(" + dnum + ")"); }
                            that.next().text("总参与数(" + tdnum + ")");
                            $(".mask").css("display", "none");
                            $("#activity_modal").removeClass('activity_modal_animation');
                            that.attr("data-num", dnum);
                            that.attr("data-tnum", tdnum);
                        } else {
                            layer.msg(result.result_msg);
                        }
                        flag = false;
                    });
                }
            });
            $(".closebtn").click(function () {
                $(".mask").css("display", "none");
                $("#activity_modal").removeClass('activity_modal_animation')
            });

        });
        function login() {
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                try { loginAction();  }
                catch (ex) { }

            }
            else if (/(Android)/i.test(navigator.userAgent)) {
                try {
                    androidfuntion.loginAction();
                }
                catch (ex) { }
            }
            else {
                location.href = "/home/login"
            }
        }
    </script>
</body>
</html>
